<template>
  <div>
    <div>
      <!-- 注册页面 -->
      <div style="text-align: center">
        <h3 style="margin: 10px 0">注册</h3>
        <div
          style="
            font-size: 12px;
            color: #777;
            text-align: left;
            margin-left: 1rem;
          "
        >
          <p style="margin: 10px 0">请使用本人手机号完成注册</p>
        </div>
      </div>
        <van-field
          v-model="form.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          @input="errMsg.phone = ''"
        >
          <template #button>
            <van-button
              size="small"
              round
              :hairline="true"
              style="color: #777"
              native-type="button"
              @click="getTelCode"
              v-show="cutdown == false"
              >获取验证码</van-button
            >
            <div
              v-show="cutdown == true"
              style="
                width: 3.9375rem;
                height: 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <van-count-down :time="time" format="sss" @finish="timeOut" />
            </div>
          </template>
        </van-field>
        <div
          style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
        >
          <p style="margin: 0">{{ errMsg.phone }}</p>
        </div>
        <van-field
          v-model="form.uname"
          name="账号"
          label="账号"
          placeholder="请输入账号"
          @input="errMsg.uname = ''"
        />
        <div
          style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
        >
          <p style="margin: 0">{{ errMsg.uname }}</p>
        </div>
        <van-field
          v-model="form.upwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          @input="errMsg.upwd= ''"
        />
        <div
          style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
        >
          <p style="margin: 0">{{ errMsg.upwd }}</p>
        </div>
        <van-field
          v-model="form.telCode"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          @input="errMsg.telCode = ''"
        >
          <template #button>
            <van-button
              size="small"
              round
              type="danger"
              native-type="submit"
              @click="codeRegister"
              :disabled="!isChecked"
              >&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;</van-button
            >
          </template>
        </van-field>
        <div
          style="font-size: 12px; color: red; margin-left: 114.8px; height: 1rem"
        >
          <p style="margin: 0">{{ errMsg.telCode }}</p>
        </div>
      
      <div class="doReg" style="margin: 1rem">
        <van-button
          plain
          hairline
          round
          size="small"
          color="#777"
          @click="toLogin"
          >&nbsp;&nbsp;&nbsp;返回登录&nbsp;&nbsp;&nbsp;</van-button
        >
      </div>
      <div class="doReg userText">
        <label style="font-size: 14px"
          ><input
            type="checkbox"
            name=""
            id=""
            :checked="isChecked"
            @click="docheck"
            style="vertical-align: middle"
          />我已阅读并遵守 <a href="javascript:;">《用户协议》</a> 与
          <a href="javascript:;">《隐私协议》</a></label
        >
      </div>
    </div>
  </div>
</template>

<script>
import Identify from "./js/Identify";
export default {
  data() {
    return {
      // 是否勾选协议
      isChecked:true,
      // 倒计时
      cutdown: false,
      time: 0,
            // 表单对象数据
      form: {
        uname: "",
        upwd: "",
        // 验证码
        telCode: "",
        phone: "",
      },
      // 校验信息
      errMsg: {
        uname: "",
        upwd: "",
        // 验证码
        telCode: "",
        phone: "",
      },
    };
  },
  methods: {
    // 切换勾选协议状态
    docheck(){
      this.isChecked = !this.isChecked
    },
    toLogin() {
      this.$eventBus.$emit("toLogin", { msg: "前往登录页面" });
    },
    // 倒计时结束
    timeOut() {
      this.cutdown = false;
      this.time = 0;
    },
    // 显示倒计时
    showCutdown() {
      this.cutdown = true;
      this.time = 60 * 1000;
    },
    // 获取验证码
    getTelCode() {
        this.errMsg.phone = Identify.checkPhone(this.form.phone);
        if (this.errMsg.phone == "") {
          let url = "/v1/register/mobile";
          let params = { phone: this.form.phone };
          this.$get(url, params).then((res) => {
            // console.log(res.data);
            if (res.data.code == 1) {
              this.showCutdown();
            } else {
              this.errMsg.phone = res.data.msg;
            }
          });
        }
      },
    // 验证码注册
    codeRegister() {
      this.errMsg.uname = Identify.checkUser(this.form.uname);
      this.errMsg.phone = Identify.checkPhone(this.form.phone);
      this.errMsg.upwd = Identify.checkPwd(this.form.upwd);
      this.errMsg.telCode = Identify.checkTelCode(this.form.telCode);
      if (
        this.errMsg.uname == "" &&
        this.errMsg.upwd == "" &&
        this.errMsg.phone == ""&&
        this.errMsg.telCode ==""
      ) {
        let url = "/v1/register";
        let params = {
          uname: this.form.uname,
          phone: this.form.phone,
          upwd: this.form.upwd,
          telCode: this.form.telCode,
        };
        this.$post(url, params).then((res) => {
          if (res.data.code == 1) {
            this.toLogin();
          } else {
            this.errMsg.telCode = res.data.msg;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-button--small {
  height: 34px;
}
</style>